<template>
	    <!-- 弹出层 -->
    <div class="modal fade" id="selfUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
      		<div class="modal-header">
	            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	            <h4 class="modal-title" id="myModalLabel">新增/编辑人员</h4>
          	</div>
          	<div class="modal-body">
          	 	<div class="form-horizontal">
                    <div class="form-group">
	                  	<label for="" class="col-sm-4 control-label">姓名<label style="color: red;">*</label>：</label>
	                  	<div class="col-sm-8">
	                    	<input type="text" class="form-control" v-model="user.accountName" placeholder="请输入姓名" :disabled="selfUserInfo.optType=='V'">
	                 	</div>
	                </div>
	                <div class="form-group">
	                  	<label for="" class="col-sm-4 control-label">手机（帐号）<label style="color: red;">*</label>：</label>
	                  	<div class="col-sm-8">
	                    	<input type="text" class="form-control" v-model="user.phone" placeholder="请输入手机、帐号" :disabled="selfUserInfo.optType=='V'">
	                  	</div>
	                </div>
	                <div class="form-group" v-if="selfUserInfo.optType==='A'">
	                  	<label for="" class="col-sm-4 control-label">密码<label style="color: red;">*</label>：</label>
	                  	<div class="col-sm-8">
	                    	<input type="password" class="form-control" v-model="user.password" placeholder="请输入密码">
	                  	</div>
	                </div>
	                <div class="form-group" v-if="selfUserInfo.optType==='A'">
	                  	<label for="" class="col-sm-4 control-label">确认密码<label style="color: red;">*</label>：</label>
	                  	<div class="col-sm-8">
	                    	<input type="password" class="form-control" v-model="user.rePassword" placeholder="请确认密码">
	                  	</div>
	                </div>
	                <div class="form-group">
	                  	<label for="" class="col-sm-4 control-label">状态<label style="color: red;">*</label>：</label>
	                  	<div class="col-sm-8">
							<select class="form-control" v-model="user.status" :disabled="selfUserInfo.optType=='V'">
								<option v-for="statusOption in statusOptions" v-bind:value="statusOption.value">{{ statusOption.text }}</option> 
							</select>
						</div>
	                </div>
					<div class="form-group">
	                  	<label for="" class="col-sm-4 control-label">是否管理员<label style="color: red;">*</label>：</label>
	                  	<div class="col-sm-8">
							<select class="form-control" v-model="user.accountType" :disabled="selfUserInfo.optType=='V'">
								<option v-for="at in accountTypeOption" v-bind:value="at.value">{{ at.text }}</option> 
							</select>
						</div>
	                </div>
					<div class="form-group">
	                  	<label for="" class="col-sm-4 control-label">角色：</label>
	                  	<div class="col-sm-8">
							<select class="form-control" v-model="user.userRoleId" :disabled="user.accountType==0 || selfUserInfo.optType=='V'">
								<option v-for="row in roleResourceList" v-bind:value="row.id" >{{row.roleName}}</option>
							</select>
						</div>
	                	<input type="hidden" class="form-control" v-model="user.id" placeholder="用户主键">
              		</div>
          	 	</div>
          </div>
          <div class="modal-footer">
            	<!--<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>-->
            	<button type="button" class="btn checkedBtn" v-show="saveUserBtnShow && selfUserInfo.optType!='V'" @click="saveUser">确定</button>
          	</div>
        </div>
      </div>
    </div>
</template>

<script>
	export default{
		//接收父组件的绑定值
		props: ["selfUserInfo"],
		data() {
			return {
				//机构信息对象
				user: {
					id: '',
					deptId: '',
					accountName: '',
					phone: '',
					password: '',
					rePassword: '',
					userRoleId:'',
					accountType: 1,
					status: ''
				},
				statusOptions: [
					{text: "禁用", value: "0"},
					{text: "在用", value: "1"}
				],
				accountTypeOption: [
					{text: "是", value: "0"},
					{text: "否", value: "1"}
				],
				roleResourceList:[],
				saveUserBtnShow: true
			}
		},
		mounted() {
			this.initRoleResource();
		},
		watch: {
			//监听父组件绑定值是否改变
			selfUserInfo: {
				handler: function(val, oldVal){
					//初始化操作类型optType，控制密码框是否进行展示
					//初始化机构
					this.user.deptId = this.selfUserInfo.orgId;
					if('U' == this.selfUserInfo.optType){
						//当编辑员工时，不需要部门id,否则会更新掉原来的部门
						this.user.deptId = "";
						this.user.password = "";
						this.user.rePassword = "";
					}
					this.initUser();
				},
				//深层监听，当位对象时，若设为true，属性变更时即可触发，若为false，属性无法监听到
				deep: true
			},
			'user.accountType': function(newValue, oldValue){
				if(newValue == 0){
					this.user.userRoleId = '';
				}
			}
		},
		methods: {
			//初始化机构信息
			initUser() {
				var _self = this;
				var userId = _self.selfUserInfo.partnerId;
				var optType = _self.selfUserInfo.optType;
				//存在机构ID,并且为修改操作时,根据ID加载一遍机构数据
				if(userId && ("U" == optType || "V" == optType)){
					var params = {};
					params["id"] = userId;
					var body = {};
					body.params = params;
			   		var url = _self.utilHelper.apiUrl + "/api/getPartnerDetail";
			   	 	_self.$http.post(url, body).then((response) => {
						var resData = response.body.resData;
						var partnerInfo = resData.partnerInfo;
						_self.user.id = partnerInfo.id;
						_self.user.accountName = partnerInfo.accountName;
						_self.user.phone = partnerInfo.phone;
						_self.user.status = partnerInfo.status;
						_self.user.accountType = partnerInfo.accountType;
						_self.user.userRoleId = partnerInfo.userRoleId;
				  		}, (response) => {
				  	});
				}else{
					_self.user.id = "";
		   			_self.user.accountName = "";
		   			_self.user.password = "";
		   			_self.user.rePassword = "";
		   			_self.user.phone = "";
		   			_self.user.status = 1;
					_self.user.accountType = 1;
				}
			},
			saveUser() {
				var _self = this;
				var params = this.user;
				//执行新增或修改
				if(_self.userValidate()){
					_self.saveUserBtnShow = false;
					var body = {};
					body.params = params;
					var url = _self.utilHelper.apiUrl + "/api/addPartner";
					if(_self.selfUserInfo.optType == "U"){
						url = _self.utilHelper.apiUrl + "/api/editPartner";
					}
			   	 	_self.$http.post(url, body).then((response) => {
							var resData = response.body.resData;
				   			var result = resData.result;
				   			var resultMsg = resData.resultMsg;
							//输出操作信息
				   			layer.msg(resultMsg, {
								time: 1000
							}, function(){
								//关闭弹出层
								_self.saveUserBtnShow = true;
								if(result == "1"){
									$('#selfUserModal').modal('hide');
									//子组件向父组件传递信号: 调用父组件中对子组件的监听
									_self.$emit('selfUserListener');
								}
							});   				
				  		}, (response) => {
				  	});
			   		
				}
			},
			userValidate() {
				var accountName = this.user.accountName;
				var phone = this.user.phone;
				var password = this.user.password;
				var rePassword = this.user.rePassword;
				if(!accountName){
					layer.msg("员工姓名不能为空",{
						time: 2000
					});
					return false;
				}
				if(!phone){
					layer.msg("手机号码不能为空",{
						time: 2000
					});
					return false;
				}else{
					var reg = /^1[3|4|5|6|7|8|9]\d{9}$/;
					if(!reg.test(phone)){
						layer.msg("手机号码格式错误",{
							time: 2000
						});
						return false;
					}
				}
				if(!password && this.selfUserInfo.optType == 'A'){
					layer.msg("密码不能为空",{
						time: 2000
					});
					return false;
				}
				if(password && this.selfUserInfo.optType == 'A'){
					var reg = /^[a-zA-Z0-9~!@#$%^&*()-_+=`{}\[\]:;"'<>?,.\/\\]{8,20}$/;
					if(!reg.test(password)){
						layer.msg("密码为长度8-20位的数字、字母、下划线或常用字符(`~!@#$%^&*()-_+={}[]:;\"'<>?,.\/)",{
							time: 3000
						});
						return false;
					}
				}
				if(!rePassword && this.selfUserInfo.optType == 'A'){
					layer.msg("请填写确认密码",{
						time: 2000
					});
					return false;
				}
				if(password != rePassword && this.selfUserInfo.optType == 'A'){
					layer.msg("两次密码输入不一致",{
						time: 2000
					});
					return false;
				}
				if(this.user.accountType=="1"&&!this.user.userRoleId){
					layer.msg("请选择角色",{
						time: 2000
					});
					return false;
				}
				return true;
			},
			initRoleResource() {
				var _self = this;
				var url = _self.utilHelper.apiUrl+"/api/getChannelRoleList";
				var params = {};
				var body = {};
				body.params = params;
				_self.$http.post(url, body).then((response)=>{
					var resData = response.body.resData;
					_self.roleResourceList = resData.channelRoleList;
				});
			}
		}
	}
	
</script>